<template>
  <div class="w-full relative bg-white h-full print-style">
    <div class="flex justify-between w-full text-center items-center pl-60">
      <div class="flex-1 text-center text-[32px]">{{ getSystemConfig('HISNAME') }}</div>
      <BaseBarcode :value="formatData[0]?.barcode" class="w-60 text-right" />
    </div>
    <div class="text-center text-[22px] font-bold">检验申请单</div>
    <div class="w-full my-2 mt-8">
      <div class="flex items-center">
        <div class="w-2/5">检验单号：{{ formatData[0]?.ksmc }}</div>
        <div class="w-3/5">检验地址：{{ formatData[0]?.ksmc }}</div>
      </div>
      <div class="flex items-center mt-2">
        <div class="w-2/5">姓名：{{ formatData[0]?.ksmc }}</div>
        <div class="w-3/5">申请日期：{{ formatData[0]?.ksmc }}</div>
      </div>
    </div>
    <div class="border border-solid border-x-0 border-b-0 mb-3"></div>
    <div class="w-full my-2 mt-6">
      <div class="flex items-center">
        <div class="w-1/3">ID号：{{ formatData[0]?.ksmc }}</div>
        <div class="w-1/3">就诊号：{{ formatData[0]?.ksmc }}</div>
        <div class="w-1/3">来源：{{ formatData[0]?.ksmc }}</div>
      </div>
      <div class="flex items-center mt-2">
        <div class="w-1/3">科别/床位：{{ formatData[0]?.ksmc }}</div>
        <div class="w-1/3">诊断：{{ formatData[0]?.ksmc }}</div>
      </div>
    </div>
    <div class="border border-dashed border-x-0 border-b-0 mb-3"></div>
    <div class="">
      <div class="flex">
        <div class="w-[96px]">检验大类：</div>
        <div class="flex-1">血液学检测</div>
      </div>
      <div class="flex mt-4">
        <div class="w-[96px]">检验项目：</div>
        <div class="flex-1">
          游离甲状腺素、甲状腺素、t-PSA、乙肝e抗原（定性）、乙肝表面抗游离甲状腺素、甲状腺素、t-PSA、乙肝e抗原（定性）、乙肝表面抗游离甲状腺素、甲状腺素、t-PSA、乙肝e抗原（定性）、乙肝表面抗原
          肌红蛋白、癌胚抗原
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getSystemConfig } from '@/utils/systemConfig'

const props = defineProps({
  printData: {
    type: Object,
    default: () => ({})
  }
})

const formatData = ref([])

watch(
  () => props.printData,
  () => {
    if (props.printData.printData?.detail.length) {
      formatData.value = props.printData.printData?.detail
    }
  }
)
</script>
<style lang="less" scoped></style>
